<template>
  <div class="schoolInfo">
     <div id="container" v-show="!loader.show">
        <div class="header_group">
              <h6>学校信息</h6>
              <p>本科及高考信息</p>
        </div>
        <ul class="info1">
             <li @click="show.school_prop=true;">
                 <label>学校</label>
                 <input type="text" v-model="school" placeholder="请选择" readonly/>
             </li>
             <li @click="show.grade_prop=true;">
                 <label>年级</label>
                 <input type="text" v-model="grade" placeholder="请选择" readonly/>
             </li>
             <li>
                 <label>专业</label>
                 <input type="text" v-model="major" placeholder="请输入专业" />
             </li>
        </ul>
        <ul class="info2">
             <li @click="show.province_prop=true;">
                 <label>高考省份</label>
                 <input type="text" v-model="homeProvince" placeholder="请选择" readonly/>
             </li>
             <li @click="show.city_prop=true;">
                 <label>高考城市</label>
                 <input type="text" v-model="homeCity" placeholder="请选择" readonly/>
             </li>
             <li @click="show.scoreLevel_prop=true;">
                 <label>录取批次</label>
                 <input type="text" v-model="scoreLevel" placeholder="请选择录取批次" readonly/>
             </li>
             <li @click="show.subjectType_prop=true;">
                 <label>文理科</label>
                 <input type="text" v-model="subjectTypeWord" placeholder="请选择文理科" readonly/>
             </li>
             <li>
                 <label>高考成绩</label>
                 <input type="text" v-model="nceeScore" placeholder="请输入分数" onkeyup="value=value.replace(/[^\d]/g,'')"/>
             </li>
             <li>
                 <label>高出分数线</label>
                 <input type="text" v-model="beyondNceeScore" placeholder="请填写" onkeyup="value=value.replace(/[^\d]/g,'')"/>
             </li>
        </ul>
        <div class="info3">
             <p>获奖情况</p>
             <textarea v-model="prizeDescription" placeholder="请输入获奖情况（选填）"></textarea>
             <div class="count">{{prizeDescription.length}}/120</div>
        </div>
        <div class="info4">
             <p>备注</p>
             <textarea v-model="remark" placeholder="请输入备注（选填）"></textarea>
             <div class="count">{{remark.length}}/120</div>
        </div>
        <p class="commit" @click="commit();">保存</p>

        <!--学校选项卡-->
        <div class="prop school_prop" v-show="show.school_prop" @click="closeProp('school_prop');">
             <ul class="tab">
                  <li :class="{'active':school=='中山大学校本部'}">
                      <label>中山大学校本部</label>
                      <input type="radio" name="school" value="中山大学校本部" v-model="school"/>
                  </li>
                  <li :class="{'active':school=='中山大学南校区'}">
                      <label>中山大学南校区</label>
                      <input type="radio" name="school" value="中山大学南校区" v-model="school"/>
                  </li>
                  <li :class="{'active':school=='中山大学北校区'}">
                      <label>中山大学北校区</label>
                      <input type="radio" name="school" value="中山大学北校区" v-model="school"/>
                  </li>
             </ul>
        </div>
        <!--年级选项卡-->
        <div class="prop grade_prop" v-show="show.grade_prop" @click="closeProp('grade_prop');">
             <ul class="tab">
                  <li :class="{'active':grade=='大一'}">
                      <label>大一</label>
                      <input type="radio" name="grade" value="大一" v-model="grade"/>
                  </li>
                  <li :class="{'active':grade=='大二'}">
                      <label>大二</label>
                      <input type="radio" name="grade" value="大二" v-model="grade"/>
                  </li>
                  <li :class="{'active':grade=='大三'}">
                      <label>大三</label>
                      <input type="radio" name="grade" value="大三" v-model="grade"/>
                  </li>
                  <li :class="{'active':grade=='大四'}">
                      <label>大四</label>
                      <input type="radio" name="grade" value="大四" v-model="grade"/>
                  </li>
                  <li :class="{'active':grade=='大五'}">
                      <label>大五</label>
                      <input type="radio" name="grade" value="大五" v-model="grade"/>
                  </li>
                  <li :class="{'active':grade=='大六'}">
                      <label>大六</label>
                      <input type="radio" name="grade" value="大六" v-model="grade"/>
                  </li>
                  <li :class="{'active':grade=='大七'}">
                      <label>大七</label>
                      <input type="radio" name="grade" value="大七" v-model="grade"/>
                  </li>
                  <li :class="{'active':grade=='研一'}">
                      <label>研一</label>
                      <input type="radio" name="grade" value="研一" v-model="grade"/>
                  </li>
                  <li :class="{'active':grade=='研二'}">
                      <label>研二</label>
                      <input type="radio" name="grade" value="研二" v-model="grade"/>
                  </li>
                  <li :class="{'active':grade=='研三'}">
                      <label>研三</label>
                      <input type="radio" name="grade" value="研三" v-model="grade"/>
                  </li>
                  <li :class="{'active':grade=='博士'}">
                      <label>博士</label>
                      <input type="radio" name="grade" value="博士" v-model="grade"/>
                  </li>
             </ul>
        </div>
        <!--录取选项卡-->
        <div class="prop scoreLevel_prop" v-show="show.scoreLevel_prop" @click="closeProp('scoreLevel_prop');">
             <ul class="tab">
                  <li :class="{'active':scoreLevel=='提前批'}">
                      <label>提前批</label>
                      <input type="radio" name="scoreLevel" value="提前批" v-model="scoreLevel"/>
                  </li>
                  <li :class="{'active':scoreLevel=='特招'}">
                      <label>特招</label>
                      <input type="radio" name="scoreLevel" value="特招" v-model="scoreLevel"/>
                  </li>
                  <li :class="{'active':scoreLevel=='本科一批'}">
                      <label>本科一批</label>
                      <input type="radio" name="scoreLevel" value="本科一批" v-model="scoreLevel"/>
                  </li>
                  <li :class="{'active':scoreLevel=='本科二批'}">
                      <label>本科二批</label>
                      <input type="radio" name="scoreLevel" value="本科二批" v-model="scoreLevel"/>
                  </li>
             </ul>
        </div>
        <!--文理科选项卡-->
        <div class="prop subjectType_prop" v-show="show.subjectType_prop" @click="closeProp('subjectType_prop');">
             <ul class="tab">
                  <li :class="{'active':subjectType==0}">
                      <label>文科</label>
                      <input type="radio" name="subjectType" value="0" v-model="subjectType"/>
                  </li>
                  <li :class="{'active':subjectType==1}">
                      <label>理科</label>
                      <input type="radio" name="subjectType" value="1" v-model="subjectType"/>
                  </li>
             </ul>
        </div>
        <!--省份选项卡-->
        <div class="prop province_prop" v-show="show.province_prop" @click="closeProp('province_prop');">
             <ul class="tab">
                  <li v-for="province in provinceArr" :class="{'active':homeProvince==province}">
                       <label>{{province}}</label>
                       <input type="radio" name="homeProvince" v-model="homeProvince" :value="province"/>
                  </li>
             </ul>
        </div>
        <!--城市选项卡-->
        <div class="prop city_prop" v-show="cityArr.length&&show.city_prop" @click="closeProp('city_prop');">
             <ul class="tab">
                  <li v-for="city in cityArr" :class="{'active':homeCity==city}">
                       <label>{{city}}</label>
                       <input type="radio" name="homeCity" v-model="homeCity" :value="city"/>
                  </li>
             </ul>
        </div>
     </div>
     <!--公共提示-->
     <tip :tip="tip" :loading="loading" :loader="loader"></tip>
  </div>
</template>

<script>
import tip from './tip'
import data from '../p_c_a.json'
export default {
  name:'schoolInfo',
  data () {
    return {
      school:'',
      grade:'',
      major:'',
      homeProvince:'',
      homeCity:'',
      scoreLevel:'',
      subjectType:'-1',
      subjectTypeWord:'',
      nceeScore:'',
      beyondNceeScore:'',
      prizeDescription:'',
      remark:'',
      provinceArr:[],
      cityArr:[],
      show:{
        school_prop:false,
        grade_prop:false,
        province_prop:false,
        city_prop:false,
        scoreLevel_prop:false,
        subjectType_prop:false
      },
      tip:{
        status:false,
        msg:''
      },
      loading:{
        status:false,
        msg:''
      },
      loader:{
        show:true
      },
      userId:'',
      url:''
    }
  },
  components:{
    tip
  },
  mounted:function(){
    this.userId = this.$route.query.userId,
    this.getInitialData();
    this.getProvince();
  },
  watch:{
    'prizeDescription':function(){
      if(this.prizeDescription.length>120){
          this.prizeDescription=this.prizeDescription.substring(0,120);
      }
    },
    'remark':function(){
      if(this.remark.length>120){
          this.remark=this.remark.substring(0,120);
      }
    },
    'subjectType':function(){
      if(this.subjectType==0){
        this.subjectTypeWord="文科";
      }else if(this.subjectType==1){
         this.subjectTypeWord="理科";
      }else{
         this.subjectTypeWord="";
      }
    },
    'homeProvince':function(){
      let _this=this;
      _this.cityArr=[];
      data.citylist.forEach(function(item,index){
            if(item.p==_this.homeProvince){
               item.c.forEach(function(city,i){
                   _this.cityArr.push(city.n);
               })
            }
      });
    }
  },
  methods:{
    getInitialData(){
        let _this=this;
        _this.$http.get("/api/teacherController.do?id="+_this.userId+"&getTeacherBaseInfoById=null").then((data)=>{
           console.log(data);
           if(data.body.school){
             _this.school=data.body.school;
             _this.grade=data.body.grade;
             _this.homeCity=data.body.homeCity;
             _this.homeProvince=data.body.homeProvince;
             _this.major=data.body.major;
             _this.nceeScore=data.body.nceeScore;
             _this.prizeDescription=data.body.prizeDescription;
             _this.remark=data.body.remark;
             _this.scoreLevel=data.body.scoreLevel;
             _this.subjectType=data.body.subjectType;
             _this.beyondNceeScore=data.body.beyondNceeScore;
             _this.url="/api/teacherController.do?updateTeacherGradutaionInfo";
           }else{
             _this.url="/api/teacherController.do?saveTeacherGradutaionInfo";
           }
           _this.loader.show=false;
        })
    },
    closeProp(tab){
       let _this=this;
       setTimeout(function(){
        if(tab=='school_prop'){
           _this.show['school_prop']=false;
        }else if(tab=='grade_prop'){
           _this.show['grade_prop']=false;
        }else if(tab=='province_prop'){
           _this.show['province_prop']=false;
        }else if(tab=='city_prop'){
           _this.show['city_prop']=false;
        }else if(tab=='scoreLevel_prop'){
           _this.show['scoreLevel_prop']=false;
        }else if(tab=='subjectType_prop'){
           _this.show['subjectType_prop']=false;
        }
       },100);
    },
    //获取省份数组
    getProvince(){
       let _this=this;
       data.citylist.forEach(function(item,index){
            _this.provinceArr.push(item.p);
       });
       console.log(_this.provinceArr);
    },
    //提示
    showTip(msg){
        let _this=this;
        _this.tip.msg=msg;
        _this.tip.status=true;
        setTimeout(function(){_this.tip.status=false;},1000);
    },
    //提交数据
    commit(){
        let _this=this;
        if(!_this.school){
            _this.showTip("请选择学校");
            return false;
        }
        if(!_this.grade){
            _this.showTip("请选择年级");
            return false;
        }
        if(!_this.major){
            _this.showTip("请填写专业");
            return false;
        }
        if(!_this.homeProvince){
            _this.showTip("请选择省份");
            return false;
        }
        if(!_this.homeCity){
            _this.showTip("请选择城市");
            return false;
        }
        if(!_this.scoreLevel){
            _this.showTip("请选择录取批次");
            return false;
        }
        if(_this.subjectType==-1){
            _this.showTip("请选择文理科");
            return false;
        }
        if(!_this.nceeScore){
            _this.showTip("请填写高考成绩");
            return false;
        }
        if(!_this.beyondNceeScore){
            _this.showTip("请填写超出分数");
            return false;
        }
        _this.loading.msg="提交中...";
        _this.loading.status=true;
        _this.$http.post(_this.url,
                        {
                            id: _this.userId,
                            school:_this.school,
                            grade: _this.grade,
                            major:_this.major,
                            homeProvince:_this.homeProvince,
                            homeCity:_this.homeCity,
                            scoreLevel:_this.scoreLevel,
                            subjectType:_this.subjectType,
                            nceeScore:_this.nceeScore,
                            beyondNceeScore: _this.beyondNceeScore,
                            prizeDescription:_this.prizeDescription,
                            remark: _this.remark
                        })
            .then(
              (response)=>{
                 _this.loading.status=false;
                 _this.showTip("保存成功");
                 setTimeout(function(){
                     _this.tip.status=false;
                     _this.$router.push({path: '/index'});
                 },1000);
              },
              (error)=>{
                _this.loading.status=false;
                console.log(error);
              }
            );
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.schoolInfo
{
    .header_group
    {
        padding:0.5rem 0;
        text-align:center;
        h6
        {
          color:#078def;
          font-size:0.5rem;
          margin-bottom:0.3rem;
        }
        p 
        {
          color:#999;
        }
    }
    .info1
    {
      background:#fff;
      padding-left:0.3rem;
      margin-top:0.3rem;
      li
      {
        position:relative;
        padding:0 0 0 1.6rem;
        height:0.88rem;
        line-height:0.88rem;
        &:nth-child(1),
        &:nth-child(2)
        {
          border-bottom:1px solid #eee;
          position:relative;
          &::after 
          {
             content:'';
             display:inline-block;
             width:0.15rem;
             height:0.15rem;
             border-right:1px solid #999;
             border-top:1px solid #999;
             position:absolute;
             right:0.3rem;
             top:0.36rem;
             -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                 -ms-transform: rotate(45deg);
                  -o-transform: rotate(45deg);
                     transform: rotate(45deg);
          }
        }
        label
        {
          line-height:0.88rem;
          height:0.88rem;
          position:absolute;
          left:0;
          top:0;
          font-size:0.28rem;
        }
        input
        {
          width:100%;
          border:none;
        }
      }
    }
    .info2
    {
      background:#fff;
      padding-left:0.3rem;
      margin-top:0.3rem;
      li
      {
        position:relative;
        padding:0 0 0 1.6rem;
        height:0.88rem;
        line-height:0.88rem;
        border-bottom:1px solid #eee;
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3),
        &:nth-child(4),
        {
          position:relative;
          &::after 
          {
             content:'';
             display:inline-block;
             width:0.15rem;
             height:0.15rem;
             border-right:1px solid #999;
             border-top:1px solid #999;
             position:absolute;
             right:0.3rem;
             top:0.36rem;
             -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                 -ms-transform: rotate(45deg);
                  -o-transform: rotate(45deg);
                     transform: rotate(45deg);
          }
        }
        &:last-child
        {
          border-bottom:none;
          &::after 
          {
             content:'分';
             display:inline-block;
             position:absolute;
             right:0.3rem;
             top:0;
          }
        }
        label
        {
          line-height:0.88rem;
          height:0.88rem;
          position:absolute;
          left:0;
          top:0;
          font-size:0.28rem;
        }
        input
        {
          width:100%;
          border:none;
        }
      }
    }
    .info3,
    .info4
    {
      position:relative;
      p
      {
        padding:0.3rem 0.3rem 0.1rem 0.3rem;
        color:#666;
        font-size:0.28rem;
      }
      textarea
      {
        padding:0.2rem 0.3rem 0.5rem 0.3rem;
        line-height:1.2;
        box-sizing:border-box;
        width:100%;
        height:2.5rem;
        border:none;
      }
      .count
      {
        position:absolute;
        bottom:0.2rem;
        right:0.3rem;
      }
    }
    .commit
    {
        margin:0.2rem 0.24rem;
        line-height:0.8rem;
        height:0.8rem;
        border-radius:0.1rem;
        border:1px solid #ccc;
        text-align:center;
        background:#078def;
        color:#fff;
        font-size:0.32rem;
    }
    .prop
    {
      width:100%;
      height:100%;
      position:fixed;
      background:rgba(0,0,0,0.5);
      left:0;
      top:0;
      &.grade_prop
      {
        .tab
        {
          margin-top:-3rem;
          height:6rem;
          overflow-y:auto;
        }
      }
      &.province_prop,
      &.city_prop
      {
        .tab
        {
          margin-top:-4rem;
          height:8rem;
          overflow-y:auto;
        }
      }
      .tab
      {
        padding:0.3rem 0;
        width:6rem;
        background:#fff;
        position:absolute;
        left:50%;
        top:50%;
        margin-top:-1.35rem;
        margin-left:-3rem;
        li
        {
           line-height:0.8rem;
           height:0.8rem;
           padding:0 0.4rem;
           position:relative;
           &::before
           {
             content:'';
             width:0.3rem;
             height:0.3rem;
             border:1px solid #ccc;
             border-radius:50%;
             display:inline-block;
             vertical-align:middle;
           }
           &.active
           {
             &::before
             {
               content:'√';
               width:0.3rem;
               height:0.3rem;
               line-height:0.34rem;
               text-align:center;
               font-size:0.2rem;
               border:1px solid #078def;
               background:#078def;
               color:#fff;
               border-radius:50%;
               display:inline-block;
               vertical-align:middle;
             }
           }
           label
           {
             margin-left:0.1rem;
           }
           input
           {
             width:100%;
             height:100%;
             position:absolute;
             left:0;
             top:0;
             border:none;
             z-index:1001;
           }
        }
      }
    }
}
</style>
